<template>
    
    <div class="flbox" v-for="item in arrSp.slice(0,9)">
        <div class="top">{{item.name}}</div>
        <div class="right">
        <div class="bottom" v-for="item in arrCon.slice(0,9)">
            <RouterLink :to="{
                name: 'xiangQing',
                query: {
                    id: item.body.items[0].id
                }
            }">
            <img :src="item.body.items[0].url" alt="" /></RouterLink>
            <p>{{ item.body.items[0].product_name }}</p>
        </div>
    </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios';

let Route = useRoute()
let arrCon = ref([])
let src = "https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=" + Route.query.id
getCon(src)
watch(Route, (val) => {
    let src = "https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=" + val.query.id;
    getCon(src)
})
function getCon(url) {
    axios.get(url).then((res) => {
        arrCon.value = res.data.data.sections;

    })
}
let arrSp = [
    {
        id: "1",
        name: "品牌墙"
    },
    {
        id: "2",
        name: "美容彩妆"
    },
    {
        id: "3",
        name: "奶粉"
    }
    ,
    {
        id: "4",
        name: "母婴专区"
    },
    {
        id: "5",
        name: "营养保健"
    },
    {
        id: "6",
        name: "数码家具"
    },];
</script>
<style scoped>
.flbox{
    display: flex;
    flex-direction: column;
    margin-bottom: 0.2rem;
}
.bottom img {
    width: 0.6rem;
    height: 0.6rem;
}
.flRight{
    font-size: 0.12rem;
    background-color: #ffffff;
}
.bottom p{
    font-size: 0.13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.flsp{

    width: 1rem;
}
.toptop{
    height: 0.2rem;
}

.top {
    font-size: 0.18rem;
    color: #000;
    font-weight: bold;
}
.bottom{
   flex: 1;
   width: 0.8rem;
   padding: 0.1rem;
   
}
 .right{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border-bottom:0.005rem solid #f0f0f0;
 }
</style>